[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import Navigation from "@/components/navigation" import Hero from "@/components/hero" import Biography from "@/components/biography" import Concerts from "@/components/concerts" import Gallery from "@/components/gallery" import Contact from "@/components/contact" import Footer from "@/components/footer" export default function Home() { const [language, setLanguage] = useState<"en" | "de" | "ru">("en") return (

) } [V0_FILE]jpg:file="public/pianist-at-grand-piano-classical-concert-hall.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pianist-at-grand-piano-classical-concert-hall-S4TlWCFS2t8XR4gpxl0BQj3PzfPFyF.jpg" isMerged="true" [V0_FILE]jpg:file="public/pianist-performing-concert-hall-classical-music.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pianist-performing-concert-hall-classical-music-cFr371IPLWNpjCs3k4XG3bUAhkldyv.jpg" isMerged="true" [V0_FILE]jpg:file="public/grand-piano-close-up-classical-concert.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/grand-piano-close-up-classical-concert-lzsgswzMMFnGo1Ia07CN0w68UprmcM.jpg" isMerged="true" [V0_FILE]jpg:file="public/concert-hall-audience-classical-music-performance.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/concert-hall-audience-classical-music-performance-8KZtyoTZ2sQjMWHIBh2XsK1g1S4ju0.jpg" isMerged="true" [V0_FILE]jpg:file="public/pianist-hands-on-keyboard-classical-music.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pianist-hands-on-keyboard-classical-music-ElEk5El4XEEnkjVkkh0QtEjTbtXMww.jpg" isMerged="true" [V0_FILE]jpg:file="public/classical-pianist-performing-grand-piano-concert-h.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classical-pianist-performing-grand-piano-concert-h-kIExuAudiphHwCmIYrAMdPaJXymwkJ.jpg" isMerged="true" [V0_FILE]jpg:file="public/male-pianist-concert-performance.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/male-pianist-concert-performance-vGd6cstfbD1vjVuxY7OGh8OUo7iPGy.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Menu, X } from "lucide-react" interface NavigationProps { language: "en" | "de" | "ru" onLanguageChange: (lang: "en" | "de" | "ru") => void } const translations = { en: { biography: "Biography", concerts: "Concerts", gallery: "Gallery", contact: "Contact", }, de: { biography: "Biographie", concerts: "Konzerte", gallery: "Galerie", contact: "Kontakt", }, ru: { biography: "Биография", concerts: "Концерты", gallery: "Галерея", contact: "Контакт", }, } export default function Navigation({ language, onLanguageChange }: NavigationProps) { const [isOpen, setIsOpen] = useState(false) const [isHeroSection, setIsHeroSection] = useState(true) const t = translations[language] useEffect(() => { const handleScroll = () => { const heroSection = document.getElementById("hero") if (heroSection) { const heroBottom = heroSection.getBoundingClientRect().bottom setIsHeroSection(heroBottom > 100) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const navLinkColor = isHeroSection ? "text-white" : "text-charcoal" const navLinkHoverColor = isHeroSection ? "hover:text-gold" : "hover:text-gold" const logoColor = isHeroSection ? "text-white" : "text-charcoal" const menuButtonColor = isHeroSection ? "text-white" : "text-charcoal" const languageButtonActiveColor = "text-gold" const languageButtonInactiveColor = isHeroSection ? "text-white/60 hover:text-white" : "text-charcoal/60 hover:text-charcoal" const navBgColor = isHeroSection ? "bg-transparent" : "bg-cream/95" const borderColor = isHeroSection ? "border-white/10" : "border-taupe/20" const mobileMenuBg = isHeroSection ? "bg-charcoal/95 backdrop-blur-sm" : "bg-cream/95" const mobileLinkColor = isHeroSection ? "text-white" : "text-charcoal" return (

{/* Logo */}

M. Müller

{/* Desktop Menu */}

{t.biography} {t.concerts} {t.gallery} {t.contact}

{/* Language Selector */}

{(["en", "de", "ru"] as const).map((lang) => ( ))}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isOpen && (

{t.biography} {t.concerts} {t.gallery} {t.contact}

)}

) } [V0_FILE]plaintext:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_5C08187A66EE-1-KFiXFvRGqSFqkLyW4gXeBkaVouGddW.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Playfair_Display, Lato } from 'next/font/google' import "./globals.css" const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-serif", }) const lato = Lato({ weight: ["300", "400", "700"], subsets: ["latin"], variable: "--font-sans", }) export const metadata: Metadata = { title: "Maximilian Müller - Classical Pianist", description: "Virtuoso pianist performing at prestigious concert halls worldwide", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/ui/sonner.tsx" isMerged="true" 'use client' import { Toaster as Sonner, ToasterProps } from 'sonner' const Toaster = ({ ...props }: ToasterProps) => { const theme = 'light' return ( ) } export { Toaster } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" @import "tailwindcss"; @custom-variant dark (&:is(.dark *)); :root { /* Color Palette */ --cream: #f5f1ed; --charcoal: #1a1815; --taupe: #a89f99; --gold: #c9a961; --warm-white: #faf8f5; /* Design Tokens */ --background: var(--cream); --foreground: var(--charcoal); --card: var(--warm-white); --card-foreground: var(--charcoal); --popover: var(--warm-white); --popover-foreground: var(--charcoal); --primary: var(--charcoal); --primary-foreground: var(--cream); --secondary: var(--taupe); --secondary-foreground: var(--warm-white); --muted: var(--taupe); --muted-foreground: var(--charcoal); --accent: var(--gold); --accent-foreground: var(--charcoal); --destructive: #d32f2f; --destructive-foreground: var(--warm-white); --border: var(--taupe); --input: var(--warm-white); --ring: var(--gold); --chart-1: var(--gold); --chart-2: var(--taupe); --chart-3: var(--charcoal); --chart-4: var(--cream); --chart-5: var(--warm-white); --radius: 0; --sidebar: var(--cream); --sidebar-foreground: var(--charcoal); --sidebar-primary: var(--charcoal); --sidebar-primary-foreground: var(--cream); --sidebar-accent: var(--gold); --sidebar-accent-foreground: var(--charcoal); --sidebar-border: var(--taupe); --sidebar-ring: var(--gold); } @theme inline { --font-sans: "Lato", "Lato Fallback"; --font-serif: "Playfair Display", "Playfair Display Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius)); --radius-md: calc(var(--radius)); --radius-lg: var(--radius); --radius-xl: calc(var(--radius)); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground font-sans; } h1 { @apply text-7xl md:text-7xl font-serif font-normal leading-tight; } h2 { @apply text-5xl md:text-5xl font-serif font-normal leading-tight; } h3 { @apply text-xl font-serif font-normal; } p { @apply text-base leading-relaxed; } small { @apply text-sm; } } /* Custom utility classes */ .line-accent { @apply h-0.5 w-12 bg-accent; } /* Removed invalid import and defined animations directly */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; } .animation-delay-100 { animation-delay: 100ms; } .animation-delay-200 { animation-delay: 200ms; } .animation-delay-300 { animation-delay: 300ms; } .animation-delay-400 { animation-delay: 400ms; } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isQuickEdit="true" "use client" interface HeroProps { language: "en" | "de" | "ru" } const translations = { en: { title: "Maximilian Müller", subtitle: "Classical Pianist", description: "A virtuoso performer captivating audiences at the world's most prestigious concert halls", }, de: { title: "Maximilian Müller", subtitle: "Klassischer Pianist", description: "Ein virtuoser Performer, der Publikum in den renommiertesten Konzertsälen der Welt fasziniert", }, ru: { title: "Максимилиан Мюллер", subtitle: "Классический пианист", description: "Виртуозный исполнитель, очаровывающий публику в престижнейших концертных залах мира", }, } export default function Hero({ language }: HeroProps) { const t = translations[language] return (

{/* Background Image */}

{/* Content */}

{t.title}

{t.subtitle}

{t.description}

{/* Social Links */}

Instagram Facebook LinkedIn

) } [V0_FILE]typescriptreact:file="components/biography.tsx" isEdit="true" isQuickEdit="true" "use client" interface BiographyProps { language: "en" | "de" | "ru" } const translations = { en: { heading: "Biography", paragraphs: [ "Maximilian Müller began his musical education at the C.P.E. Bach Music Gymnasium in Berlin and went on to study as a junior student at the Hans Eisler School of Music, where he was taught by professors such as Ton Nu Ngyet Minh, Konrad Maria Engel, Prof. Gabriele Kupfernagel. He is currently continuing his studies at the Hamburg University of Music and Theatre under the guidance of the renowned pianist Anna Vinnitskaya.", "From an early age, his talent was recognized through numerous awards, including several first prizes with maximum scores at \"Jugend Musiziert\" as well as the Carl Bechstein Special Prize. In 2015, he was accepted into the \"International Academy for the Promotion of Gifted Children,\" where he participated in a DVD production in 2020.", "Significant masterclasses and collaboration with renowned professors such as Prof. Eldar Nebolsin, Elizaveta Blumina, and Prof. Galina Iwanzowa provided him with valuable artistic inspiration. As part of the 6th Chopin Festival in Hamburg in 2024, he participated in a masterclass with the internationally celebrated pianist and professor Ewa Kupiec, aiming to gain further impulses for his pianistic career.", "Through scholarships from the Jürgen Ponto Foundation and currently from the Oskar and Vera Ritter Foundation, Maximilian Müller has received valuable support on his musical journey.", "His stage presence has led him to prestigious concert halls such as the Konzerthaus Berlin, Deutsche Oper Berlin, Laeiszhalle Hamburg, RBB-Saal, and the Sibiu Philharmonic, among many other significant venues. During the \"Tournèe Giovani Talenti,\" he captivated audiences in Italy during his concert tour at renowned locations such as Teatro Sociale Balzan in Gaiba, Sala Dei Giganti in Padua, and many more.", "Innovative perspective, determination, and exceptional musical talent naturally guide the young musician to the world's finest stages, where he continues to share his passion for music with audiences everywhere.", ], }, de: { heading: "Biografie", paragraphs: [ "Maximilian Müller begann seine musikalische Ausbildung am C.P.E. Bach Musik-Gymnasium in Berlin und studierte anschließend als Jungstudent an der Hochschule für Musik \"Hanns Eisler\", wo er von Professoren wie Ton Nu Ngyet Minh, Konrad Maria Engel und Prof. Gabriele Kupfernagel unterrichtet wurde. Derzeit setzt er sein Studium an der Hochschule für Musik und Theater Hamburg unter der Leitung der renommierten Pianistin Anna Vinnitskaya fort.", "Sein Talent wurde schon früh durch zahlreiche Auszeichnungen anerkannt, darunter mehrere erste Preise mit Höchstpunktzahl bei \"Jugend Musiziert\" sowie der Carl Bechstein Sonderpreis. 2015 wurde er in die \"Internationale Akademie zur Förderung begabter Kinder\" aufgenommen, wo er 2020 an einer DVD-Produktion teilnahm.", "Bedeutende Meisterkurse und die Zusammenarbeit mit renommierten Professoren wie Prof. Eldar Nebolsin, Elizaveta Blumina und Prof. Galina Iwanzowa gaben ihm wertvolle künstlerische Impulse. Im Rahmen des 6. Chopin Festivals in Hamburg 2024 nahm er an einem Meisterkurs mit der international gefeierten Pianistin und Professorin Ewa Kupiec teil.", "2025 gewann er den ersten Preis beim Festival \"Romanceada\" in San Marino.", "Durch Stipendien der Jürgen Ponto Stiftung und derzeit der Oskar und Vera Ritter Stiftung hat Maximilian Müller wertvolle Unterstützung auf seinem musikalischen Weg erhalten.", "Seine Bühnenpräsenz hat ihn zu renommierten Konzertsälen wie dem Konzerthaus Berlin, der Deutschen Oper Berlin, der Laeiszhalle Hamburg, dem RBB-Saal und der Philharmonie Sibiu geführt. Während der \"Tournée Giovani Talenti\" begeisterte er Publikum in Italien mit Konzerten an renommierten Orten wie dem Teatro Sociale Balzan in Gaiba und der Sala Dei Giganti in Padua.", "Innovative Perspektive, Entschlossenheit und außergewöhnliches musikalisches Talent führen den jungen Musiker natürlich zu den besten Bühnen der Welt, wo er seine Leidenschaft für Musik mit Publikum überall teilt.", ], }, ru: { heading: "Биография", paragraphs: [ "Максимилиан Мюллер начал своё музыкальное образование в музыкальной гимназии имени К.Ф.Э. Баха в Берлине и продолжил учёбу в качестве младшего студента в Высшей школе музики имени Ганса Айслера, где учился у профессоров Тон Ну Нгет Минь, Конрада Марии Энгеля и профессора Габриэле Купфернагеля. В настоящее время он продолжает своё обучение в Высшей школе музыки и театра Гамбурга под руководством известной пианистки Анны Винницкой.", "Его талант был признан с раннего возраста благодаря многочисленным наградам, включая несколько первых премий с максимальными баллами на конкурсе \"Jugend Musiziert\" и премию имени Карла Бехштейна. В 2015 году он был принят в \"Международную академию поддержки одарённых детей\", где участвовал в DVD-производстве в 2020 году.", "Значительные мастер-классы и сотрудничество с известными профессорами, такими как профессор Элдар Неболсин, Елизавета Блумина и профессор Галина Ивановская, обогатили его художественный опыт. В рамках 6-го Шопеновского фестиваля в Гамбурге в 2024 году он участвовал в мастер-классе с международно известной пианисткой и профессором Эвой Купец.", "В 2025 году он выиграл первый приз на фестивале \"Романседа\" в Сан-Марино.", "Благодаря стипендиям от фонда Юргена Понто и в настоящее время от фонда Оскара и Веры Риттер, Максимилиан Мюллер получил ценную поддержку на своём музыкальном пути.", "Его сценическое присутствие привело его в престижные концертные залы, такие как Концертхаус Берлин, Германская государственная опера Берлин, Лаейцхалле Гамбург, РББ-зал и Филармония Сибиу, и многие другие значительные площадки. Во время \"Tournèe Giovani Talenti\" он очаровал аудиторию в Италии, выступая в известных местах, таких как Театро Социале Балцан в Гайба и Сала Дей Джиганти в Падуе.", "Инновационный подход, решительность и исключительный музыкальный талант естественным образом ведут молодого музыканта на лучшие мировые сцены, где он продолжает делиться своей страстью к музыке со слушателями по всему миру.", ], }, } export default function Biography({ language }: BiographyProps) { const t = translations[language] return (

{t.heading}

{t.paragraphs.map((paragraph, index) => (

{paragraph}

))}

) } [V0_FILE]typescriptreact:file="components/concerts.tsx" isEdit="true" isQuickEdit="true" "use client" interface ConcertsProps { language: "en" | "de" | "ru" } const translations = { en: { heading: "Upcoming Concerts", learnMore: "Learn More", }, de: { heading: "Kommende Konzerte", learnMore: "Mehr erfahren", }, ru: { heading: "Предстоящие концерты", learnMore: "Подробнее", }, } const concerts = [ { date: "08.12.2024", time: "18:00", title: "Piano Recital", venue: "Torhaus Hamburg", location: "Hamburg", }, { date: "16.12.2024", time: "19:00", title: "Piano Recital HFMT", venue: "Hamburg, Orchestra Studio", location: "Hamburg", }, { date: "21.12.2024", time: "17:00", title: "Benezkonzert", venue: "Rathaus Zehlendorf, Bürgersaal", location: "Berlin", }, ] export default function Concerts({ language }: ConcertsProps) { const t = translations[language] return (

{t.heading}

{concerts.map((concert, idx) => (

{concert.date}

{concert.time}

{concert.title}

{concert.venue}

{concert.location}

))}

) } [V0_FILE]typescriptreact:file="components/gallery.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" interface GalleryProps { language: "en" | "de" | "ru" } const translations = { en: { heading: "Gallery", }, de: { heading: "Galerie", }, ru: { heading: "Галерея", }, } const galleryItems = [ { id: 1, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3862.JPG-QFjEqVJxprhU4vjLcesRXlZsTk7pRM.jpeg", title: "Archway Portrait", }, { id: 2, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3805.JPG-yq7ymSGUhJV4rq9yyyquEOMeXXYLDp.jpeg", title: "Classical Courtyard", }, { id: 3, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3938.JPG-OmXjCML5NpcJKstfM3mOWBFPt1HDzH.jpeg", title: "Tunnel Lights", }, { id: 4, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3768.JPG-Q3wacl3wQVQUhGT4jgw6Rf3OVCni3R.jpeg", title: "Piano Moment", }, { id: 5, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3917.JPG-iPCjoD8pZGUcg5qzfRnrkOrb14tK1E.jpeg", title: "Urban Gallery", }, ] export default function Gallery({ language }: GalleryProps) { const t = translations[language] const [selectedId, setSelectedId] = useState(null) const selectedItem = galleryItems.find((item) => item.id === selectedId) const selectedIndex = galleryItems.findIndex((item) => item.id === selectedId) const goToNext = () => { if (selectedId !== null) { const nextIndex = (selectedIndex + 1) % galleryItems.length setSelectedId(galleryItems[nextIndex].id) } } const goToPrev = () => { if (selectedId !== null) { const prevIndex = (selectedIndex - 1 + galleryItems.length) % galleryItems.length setSelectedId(galleryItems[prevIndex].id) } } return (

{t.heading}

{galleryItems.map((item) => (

setSelectedId(item.id)} className="group overflow-hidden bg-charcoal/5 cursor-pointer" >

{item.title}

))}

{selectedItem && (

setSelectedId(null)} >

e.stopPropagation()} > {selectedItem.title}

{/* Close button */} {/* Previous button */} {/* Next button */} {/* Image counter */}

{selectedIndex + 1} / {galleryItems.length}

)}

) } [V0_FILE]typescriptreact:file="components/contact.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" interface ContactProps { language: "en" | "de" | "ru" } const translations = { en: { heading: "Contact", subheading: "Get in Touch", email: "Email", phone: "Phone", message: "Message", send: "Send Message", location: "Location", }, de: { heading: "Kontakt", subheading: "Treten Sie mit uns in Kontakt", email: "E-Mail", phone: "Telefon", message: "Nachricht", send: "Nachricht senden", location: "Standort", }, ru: { heading: "Контакт", subheading: "Свяжитесь с нами", email: "Электронная почта", phone: "Телефон", message: "Сообщение", send: "Отправить сообщение", location: "Местоположение", }, } export default function Contact({ language }: ContactProps) { const t = translations[language] const [formData, setFormData] = useState({ name: "", email: "", message: "" }) const [submitted, setSubmitted] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const mailtoLink = `mailto:pianist@maximilian-mueller.com?subject=${encodeURIComponent(`New message from ${formData.name}`)}&body=${encodeURIComponent(`From: ${formData.email}\n\n${formData.message}`)}` window.location.href = mailtoLink setSubmitted(true) setFormData({ name: "", email: "", message: "" }) setTimeout(() => setSubmitted(false), 5000) } return (

{t.heading}

{t.subheading}

{/* Contact Info */}

{t.email}

pianist@maximilian-mueller.com

{t.phone}

+49 (0) 40 12345678

{t.location}

Hamburg, Germany

{/* Contact Form */}

{submitted && (

Message sent successfully!

)}

setFormData({ ...formData, name: e.target.value })} required className="w-full bg-warm-white border border-taupe/30 px-4 py-3 text-charcoal placeholder-charcoal/50 focus:outline-none focus:border-gold transition-colors" />

setFormData({ ...formData, email: e.target.value })} required className="w-full bg-warm-white border border-taupe/30 px-4 py-3 text-charcoal placeholder-charcoal/50 focus:outline-none focus:border-gold transition-colors" />

setFormData({ ...formData, message: e.target.value })}
                required
                className="w-full bg-warm-white border border-taupe/30 px-4 py-3 text-charcoal placeholder-charcoal/50 focus:outline-none focus:border-gold transition-colors resize-none"
              />
            </div>
            <button
              type="submit"
              className="w-full bg-charcoal text-warm-white py-3 font-medium hover:bg-charcoal/90 transition-colors duration-300"
            >
              {t.send}
            </button>
          </form>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true"
"use client"

interface FooterProps {
  language: "en" | "de" | "ru"
}

const translations = {
  en: {
    copyright: "All rights reserved.",
    followMe: "Follow",
  },
  de: {
    copyright: "Alle Rechte vorbehalten.",
    followMe: "Folgen Sie mir",
  },
  ru: {
    copyright: "Все права защищены.",
    followMe: "Следите за мной",
  },
}

export default function Footer({ language }: FooterProps) {
  const t = translations[language]

return (
    <footer className="bg-charcoal text-warm-white py-12">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
          <div>
            <h3 className="text-warm-white mb-4">M. Müller</h3>
            <small className="text-warm-white/70">Classical Pianist</small>
          </div>

<div>
            <h3 className="text-warm-white mb-4">Quick Links</h3>
            <ul className="space-y-2 text-sm text-warm-white/70">
              <li>
                <a href="#biography" className="hover:text-gold transition-colors">
                  Biography
                </a>
              </li>
              <li>
                <a href="#concerts" className="hover:text-gold transition-colors">
                  Concerts
                </a>
              </li>
              <li>
                <a href="#gallery" className="hover:text-gold transition-colors">
                  Gallery
                </a>
              </li>
            </ul>
          </div>

<div>
            <h3 className="text-warm-white mb-4">{t.followMe}</h3>
            <div className="flex gap-4">
              <a href="https://instagram.com" className="text-warm-white/70 hover:text-gold transition-colors">
                Instagram
              </a>
              <a href="https://facebook.com" className="text-warm-white/70 hover:text-gold transition-colors">
                Facebook
              </a>
            </div>
          </div>
        </div>

<div className="border-t border-warm-white/20 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-warm-white/70">
          <small>© 2025 Maximilian Müller. {t.copyright}</small>
          <div className="flex gap-6 mt-4 md:mt-0">
            <a href="#" className="hover:text-warm-white transition-colors">
              Privacy Policy
            </a>
            <a href="#" className="hover:text-warm-white transition-colors">
              Terms
            </a>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]jpeg:file="public/images/dscf3797.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3797.JPG-D5CA7ICwqzRlSb4xwdgFIdtxI4Epof.jpeg"
[V0_FILE]jpeg:file="public/images/dscf3862.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3862.JPG-QFjEqVJxprhU4vjLcesRXlZsTk7pRM.jpeg"
[V0_FILE]jpeg:file="public/images/dscf3805.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3805.JPG-yq7ymSGUhJV4rq9yyyquEOMeXXYLDp.jpeg"
[V0_FILE]jpeg:file="public/images/dscf3938.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3938.JPG-OmXjCML5NpcJKstfM3mOWBFPt1HDzH.jpeg"
[V0_FILE]jpeg:file="public/images/dscf3768.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3768.JPG-Q3wacl3wQVQUhGT4jgw6Rf3OVCni3R.jpeg"
[V0_FILE]jpeg:file="public/images/dscf3917.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DSCF3917.JPG-iPCjoD8pZGUcg5qzfRnrkOrb14tK1E.jpeg"</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This